<template>
  <van-nav-bar
    title="我的收藏"
    left-arrow
    fixed
    @click-left="onBack"
    @click-right="onDelete"
  >
    <template #right v-if="CollectionList.length > 0">
      <van-icon name="cross" />
    </template>
  </van-nav-bar>

  <div class="clear"></div>
  <div class="hbox"></div>
  <div class="mainWarp" style="background: #f3f3f3">
    <ul class="proul" v-if="CollectionList.length > 0">
      <li v-for="item in CollectionList" :key="item.id">
        <router-link
          :to="{
            path: '/product/product/info',
            query: { proid: item.product.id },
          }"
        >
          <img :src="item.product.cover_cdn" style="height: 100px" />
        </router-link>
        <router-link
          :to="{
            path: '/product/product/info',
            query: { proid: item.product.id },
          }"
        >
          <p class="tit">{{ item.product.name }}</p>
        </router-link>
        <div class="price">
          <p>￥ {{ item.product.price }}</p>
          <van-checkbox-group v-model="checked">
            <van-checkbox
              v-if="deleteCross"
              :name="item.id"
              checked-color="#ee0a24"
              @click="onDeleteCross(item.proid)"
            ></van-checkbox>
          </van-checkbox-group>
        </div>
      </li>
    </ul>
    <van-empty v-else description="暂无收藏" />
  </div>

  <van-popup v-model:show="show" round position="bottom">
    <van-picker
      :columns="TypeList"
      @cancel="show = false"
      @confirm="onConfirm"
    />
  </van-popup>

  <van-submit-bar v-if="deleteCross" button-text="删除" @submit="onSubmit">
  </van-submit-bar>
</template>
<script>
import { showNotify, showConfirmDialog } from "vant";
export default {
  data() {
    return {
      LoginAuth: {},
      typeid: 0,
      flag: 0,
      order: "createtime", // 排序
      ProductList: [],
      show: false,
      TypeList: [],
      CollectionList: [],
      checked: [],
      deleteCross: false,
      checkedId: "",
    };
  },
  created() {
    this.LoginAuth = this.$cookies.get("LoginAuth")
      ? this.$cookies.get("LoginAuth")
      : {};
    // this.typeid = this.$route.query.typeid;
    // this.getProductData();
    // this.getTypeData();
    this.getCollectionData();
  },
  methods: {
    onBack() {
      this.$router.go(-1);
    },
    onDelete() {
      this.deleteCross = this.deleteCross ? false : true;
    },
    onDeleteCross(e) {
      // console.log(e);
      this.checkedId = e;
      // console.log(e);
    },
    async onSubmit() {
      let data = {
        busid: this.LoginAuth.id,
        proid: this.checkedId,
      };

      // console.log("-------------", data);

      let result = await this.$api.ProductCollection(data);

      // console.log(result);

      if (result.code === 1) {
        if (result.data.status) {
          this.status = true;
        } else {
          this.status = false;
        }

        showNotify({
          type: "success",
          message: result.msg,
          duration: 1500,
        });

        this.$router.go(0);
      }
      // let data = {
      //   'proid': proid
      // }

      // let result = await this.$api.ProductCollection();

      // console.log(result);
    },

    async getProductData() {
      let data = {
        typeid: this.typeid,
        order: this.order,
        flag: this.flag,
      };

      let result = await this.$api.collection();

      if (result.code === 1) {
        this.ProductList = result.data;
      }
    },
    onFlag() {
      this.getProductData();
    },
    onOrderBy() {
      this.getProductData();
    },
    onConfirm(values) {
      this.show = false;

      this.typeid = values.selectedOptions[0].value;

      this.getProductData();
    },
    async getTypeData() {
      let result = await this.$api.collection();

      if (result.code === 1) {
        let data = [];

        for (let item of result.data) {
          data.push({
            text: item.name,
            value: item.id,
          });
        }

        if (data.length > 0) {
          this.TypeList = data;
        }
      }
    },
    async getCollectionData() {
      let result = await this.$api.collection();

      // console.log(result);

      if (result.code === 1) {
        this.CollectionList = result.data;
        // let data = [];

        // for (let item of result.data) {
        //   data.push({
        //     text: item.name,
        //     value: item.id,
        //   });
        // }

        // if (data.length > 0) {
        //   this.CollectionList = data;
        // }
      }

      // console.log(this.CollectionList);
    },
  },
};
</script>

<style scoped>
.price {
  display: flex;
  justify-content: space-between;
}
</style>